/* 初始样式 */
.father1 {
    width: 600px;
    background-color: lightblue;
}
.son {
    float: left;
}
.son:nth-child(1) {
    width: 100px;
    height: 100px;
    background-color: lightcoral;
}
.son:nth-child(2) {
    width: 200px;
    height: 200px;
    background-color: lightsalmon;
}
.father2 {
    width: 500px;
    height: 150px;
    background-color: #000000;
}

/* 2. 父级添加overflow ； 其他不变*/
.method2 {
    overflow: hidden;
}		
			
/* 3. 使用after伪元素清除浮动*/
.clearfix:after {  
    content: ""; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;  
}   

.clearfix {
    *zoom: 1;	/* IE6、7 专有 */	
}
			
/* 4. 使用双伪元素清除浮动 */
.clearfix2:before,.clearfix2:after { 
    content:"";
    display:table; 
}
.clearfix2:after {
    clear:both;
}
.clearfix2 {
    *zoom:1; 	/* IE6、7 专有 */	
}